<template>
  <div class="judge_card">
    <img
      src="../../assets/image/judge/light.png"
      alt=""
      srcset=""
      class="light"
    />
    <div class="boder">
      <div class="corner_marker">
        <svg width="19px" height="68px" class="lt">
          <path
            fill-rule="evenodd"
            fill="rgb(41, 129, 238)"
            d="M2.746,5.138 L2.746,66.464 L1.210,67.557 L1.210,59.249 L0.043,58.025 L0.113,51.816 L1.210,50.613 L1.210,-0.000 L18.543,-0.000 L17.446,1.639 L5.489,1.639 L2.746,5.138 Z"
          />
        </svg>
        <svg class="lb" width="19px" height="18px">
          <path
            fill-rule="evenodd"
            fill="rgb(41, 129, 238)"
            d="M2.299,16.346 L2.299,1.807 L0.763,0.714 L0.763,6.125 L-0.004,6.999 L-0.004,11.700 L0.763,12.684 L0.763,17.986 L18.096,17.986 L16.999,16.346 L2.299,16.346 Z"
          />
        </svg>
        <svg class="rb" width="18px" height="18px">
          <path
            fill-rule="evenodd"
            fill="rgb(41, 129, 238)"
            d="M16.463,16.355 L16.463,1.816 L18.000,0.723 L18.000,17.995 L0.667,17.995 L1.764,16.355 L16.463,16.355 Z"
          />
        </svg>
        <svg class="rt" width="17px" height="17px">
          <path
            fill-rule="evenodd"
            fill="rgb(41, 129, 238)"
            d="M15.494,1.617 L15.494,15.920 L17.000,16.995 L17.000,0.004 L0.011,0.004 L1.086,1.617 L15.494,1.617 Z"
          />
        </svg>
      </div>
      <div class="card_title">{{ name }}</div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup name="JudgeCard">
defineProps({
  name: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.judge_card {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 10px;
  box-sizing: border-box;

  .light {
    width: 458px;
    height: 90px;
    position: absolute;
    top: -20px;
    left: 0;
  }

  .boder {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(78, 124, 246, 0.3);
    box-shadow: inset 0px 0px 30px 0px rgba(78, 124, 246, 0.3);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 0;

    .corner_marker {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;

      .lt {
        position: absolute;
        top: 0;
        left: -1px;
      }

      .lb {
        position: absolute;
        bottom: 0;
        left: -1px;
      }

      .rb {
        position: absolute;
        bottom: 0;
        right: 0;
      }

      .rt {
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .card_title {
      width: 100%;
      height: 30px;
      background: url("../../assets/image/judge/title_bar.png") left bottom
        no-repeat;
      background-size: 150px 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 2px 2px 0px #131a44;
      text-indent: 10px;
    }

    .content {
      width: 100%;
      height: calc(100% - 30px);
      position: relative;
      z-index: 3;
      box-sizing: border-box;
      // padding: 10px;
    }
  }
}
</style>
